<!DOCTYPE html>
<html lang="en">
<head>
    <title>获取角色信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>


</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">  <section id="main-content">
    <section class="wrapper">
        <div class="table-agile-info">
            <div class="panel panel-default">
                <div class="panel-heading">
                    角色基本信息表
                </div>
                <section class="panel">
                <#--搜索框-->
                    <header class="panel-heading wht-bg">
                        <h4 class="gen-case">
                            <form action="#" class="pull-right mail-src-position">
                                <div class="input-append">
                                    <input type="text" class="form-control search" placeholder="搜索^_^" id="keyword">
                                </div>
                            </form>
                        </h4>
                    </header>
                    <div class="table-inbox-wrap" id="app">
                        <table class="table table-inbox table-hover">
                            <thead>
                            <tr>
                                <th style="width:20px;">
                                    <label class="i-checks m-b-none">
                                        <input type="checkbox" id="chk" value="1">&nbsp;全选
                                    </label>
                                </th>
                                <th>序号</th>
                                <th>角色</th>
                                <th>权限备注</th>
                            <#--<th style="width:30px;" colspan="2">操作</th>-->
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in result">
                                <td>
                                    <label class="i-checks m-b-none">
                                        <input type="checkbox" name="post[]" class="chk_all" v-bind:value="item.ruuid">
                                    </label>
                                </td>
                                <td>
                                    <span class="text-ellipsis">&nbsp;&nbsp;&nbsp;{{index+1}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </td>
                                <td>
                                    <span class="text-ellipsis">{{item.rname}}</span>
                                </td>
                                <td>
                                    <span class="text-ellipsis" v-for="(it,index1) in item.permissionSet">{{it.pname}}&nbsp;</span>
                                </td>
                            <#-- <td>
                                 <input type="button" @click="updateEvent(item.ruuid)" value="修改">
                                 <input type="button" @click="delEvent(item.ruuid)" value="删除">
                             </td>-->

                            </tr>
                            <tr>
                                <td>
                                    <input type="button" value="添加角色" id="addRole">
                                </td>
                                <td>
                                    <input type="button" value="删除角色" id="delRole">
                                </td>

                                <#--<td colspan="2">
                                    <div id="pagenav"></div>
                                </td>-->
                            </tr>
                            </tbody>
                        </table>
                    </div>
            </div>
    </section>
    </div>
    </div>
<#include "foot.ftl">
</section>
</section>
</section>
</body>
</html>
<script>


    var app = new Vue({
        el: "#app",
        data: {
            result: []
        }
    });
    var getRoleList = function (curr) {

        $.ajax({
            type: "POST",
            url: "/role/getAllRole",
            dataType: "json",
            data: {
                pageSize: 2000,
                rname: $("#keyword").val(),
                pageNum: curr || 1
            },
            success: function (msg) {
                app.result = msg.map.page;
                laypage({
                    cont: "pagenav",
                    pages: msg.map.totlePages,
                    skin: '#436EEE',
                    first: "首页",
                    last: "尾页",
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getRoleList(obj.curr);
                        }

                    }
                });
            }

        });
    };
    getRoleList();

    $("#keyword").keyup(function () {
        getRoleList() ;
    });


    $("#delRole").click(function () {
        var x=[];
        $("[type='checkbox']:checked").each(function () {
            x.push($(this).val());
        });

        layer.confirm("是否确认删除？", {btn: ["是", "否"]}, function () {
                    $.ajax({
                        type: "POST",
                        url: "/role/delete",
                        data: {
                            ruuid: JSON.stringify(x)
                        },
                        dataType: "json",
                        success: function (data) {
                            if(data.flag){
                                layer.msg("删除成功",{icon:6});
                                getRoleList();

                            }
                        }
                    });

                }
        );


    });

    $("#addRole").click(function () {
        window.location.href="/role/addRole";
    });

    $("#chk").click(function () {
        if($("#chk").is(":checked")){
            $(".chk_all").each(function () {
                $(this).prop("checked",true);
            });
        }else {
            $(".chk_all").each(function () {
                $(this).prop("checked",false);
            });
        }
    });



</script>